<!-- 外出登记 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form ref="ruleFormRef" :model="form" label-width="auto" :inline="true">
        <el-form-item label="老人姓名:" prop="name">
          <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="审批状态:" prop="state">
          <el-select v-model="form.state" placeholder="请选择" clearable style="width: 210px">
            <el-option label="待审批" value="0" />
            <el-option label="审批通过" value="1" />
            <el-option label="审批拒绝" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="巡查上报时间:" prop="beginDate">
          <el-date-picker
            v-model="value"
            type="daterange"
            clearable
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="datachange"
          />
        </el-form-item>
        <el-form-item style="margin-left: 2%">
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="goOutTable">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增外出
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #goOutTime="{ scope }">
          {{
            dayjs(scope.row.startTime).format("YYYY-MM-DD") +
            "至" +
            dayjs(scope.row.endTime).format("YYYY-MM-DD")
          }}
        </template>

        <template #addTime="{ scope }">
          {{ dayjs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>

        <template #state="{ scope }">
          <div v-if="scope.row.state == 1" type="info">未审核</div>
          <div v-else-if="scope.row.state == 2" type="success">已审核</div>
          <div v-else-if="scope.row.state == 0" type="danger">0</div>
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            :icon="Tickets"
            text
            size="small"
            class="btn"
            @click="handelDetails(scope.row.id)"
          >
            查看详情
          </el-button>
        </template>
      </ELTable>
    </el-card>

    <!-- 新增外出 -->
    <elderlyDialog v-if="dialogVisible" :url="'/care/add'" @close="handelClose" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Search, Refresh, Delete, Edit, Tickets } from "@element-plus/icons-vue";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { goOutDel, goOutDelAll, goOutList } from "@/api/care/goOut/goOut";
import { goListData, goListParams } from "@/api/care/goOut/type";
import elderlyDialog from "@/components/market/hospitalized/elderly/selectElderly.vue";
import dayjs from "dayjs";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const dialogVisible = ref(false);

const value = ref([]);
const form = reactive<goListParams>({
  name: "",
  state: undefined,
  beginDate: "",
  endDate: "",
});

// 新增外出
const add = () => {
  dialogVisible.value = true;
};

// 编辑
const uploadEdit = (row: goListData) => {
  router.push({ path: "/care/add", query: { id: row.id } });
};

// 查看详情
const handelDetails = (id: number) => {
  router.push(`/care/details/${id}`);
};

// 搜索
const search = () => {
  form.page = 1;
  goOutTable.value.getData(form);
};

// 重置
const ruleFormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  value.value = [];
};

// 日期
const datachange = (e: any) => {
  // console.log(e);
  if (e != null) {
    form.beginDate = e[0];
    form.endDate = e[1];
  } else {
    form.beginDate = "";
    form.endDate = "";
  }
};

// 关闭弹框
const goOutTable = ref();
const handelClose = () => {
  dialogVisible.value = false;
  goOutTable.value.getData();
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: goOutList,
  delete: goOutDel,
  deleteAll: goOutDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "elderlyName",
      label: "老人姓名",
    },
    {
      prop: "begName",
      label: "床位号",
    },
    {
      prop: "addAccountName",
      label: "陪同人员姓名",
    },
    {
      prop: "mobile",
      label: "陪同人员手机号",
    },
    {
      prop: "goOutTime",
      label: "外出时间",
      slot: true,
    },
    {
      prop: "addAccountName",
      label: "上报人",
    },
    {
      prop: "addTime",
      label: "上报时间",
      slot: true,
    },
    {
      prop: "state",
      label: "审批状态",
      slot: true,
    },
    {
      prop: "operate",
      label: "操作",
      attrs: {
        width: "270px",
      },
      slot: true,
    },
  ],
});
</script>

<style scoped lang="less">
.btn {
  color: rgb(64, 158, 255);
}

.btn:nth-child(2) {
  color: rgb(245, 108, 127);
}
</style>
